<template>
    <div>
        <!-- 选项卡 -->
        <el-tabs v-model="active" type="card">
            <el-tab-pane :label="item.label" :name="item.value" v-for="item in tabs" :key="item.value"></el-tab-pane>
        </el-tabs>
        <div class="flex flex-end">
            <el-button
                v-if="active!='A' && active!='B' && active!='F' && active!='H'"
                type="primary"
                :disabled="formData.length == 0"
                @click.native="exportExcel()">导出
            </el-button>
        </div>
        <!-- 表格 -->
        <el-table
            v-if="active != 'B' && active != 'A' && active != 'H'"
            v-loading="loading"
            :data="formData"
            style="width: 100%">
            <el-table-column
                prop="userID"
                label="用户ID">
            </el-table-column>
            <el-table-column
                prop="realName"
                label="用户真实姓名"
                width="150">
            </el-table-column>
            <el-table-column
                prop="exposureChannel"
                label="曝光渠道">
            </el-table-column>
            <el-table-column
                prop="idType"
                label="用户类型"
                width="150">
            </el-table-column>
            <el-table-column
                prop="vipStatus"
                label="会员状态">
            </el-table-column>
            <el-table-column
                prop="loginCity"
                label="登录城市">
            </el-table-column>
            <el-table-column
                prop="loginIP"
                label="登录IP">
            </el-table-column>
            <el-table-column
                prop="createDate"
                label="操作时间">
                <template slot-scope="scope">
                    <span>{{common.filter_date(scope.row.createDate)}}</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 文章收益 -->
        <el-table
            v-if="active == 'B'"
            v-loading="loading"
            :data="formData"
            style="width: 100%">
            <el-table-column
                prop="orderNo"
                label="流水号">
            </el-table-column>
            <el-table-column
                prop="userID"
                label="用户ID">
            </el-table-column>
            <el-table-column
                prop="realName"
                label="用户真实姓名">
            </el-table-column>
            <el-table-column
                prop="createDate"
                label="交易日期">
                <template slot-scope="scope">
                    <span>{{common.filter_date(scope.row.createDate)}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="incomeType"
                label="收益类型">
            </el-table-column>
            <el-table-column
                prop="paymentType"
                label="支付平台">
            </el-table-column>
            <el-table-column
                prop="money"
                label="交易金额">
            </el-table-column>
            <el-table-column
                prop="balance"
                label="余额">
            </el-table-column>
        </el-table>
        <!-- 评论 -->
        <div v-if="active == 'A'">
            <comment
                v-if="formData.length>0"
                :formData="formData">
            </comment>
            <p class="none center" v-else>暂无数据</p>
        </div>
        <!-- 回复 -->
        <div v-if="active == 'H'">
            <p class="none center" v-if="formData.length == 0">暂无数据</p>
            <reply
                v-else
                v-for="(item,key) in formData"
                :formData="item"
                :key="key"
                border="true">
            </reply>
        </div>
        <!-- 分页 -->
        <page :total="pageTotal" @change="changePage" :init="active"></page>
    </div>
</template>

<script>
import page from '@/components/public/Pagination'
import comment from './../components/comment.vue'
import reply from './../components/reply.vue'
import { remote } from '@/api/index'
export default {
    props:["id","type"],
    components:{
        page,
        comment,
        reply
    },
    data () {
        return {
            loading:false,
            formData:[],
            active:'1',
            tabs:[],
            //分页
            pageTotal:0,
            pageNum:1,
            pageSize:20,
            //other
            http:"",
        }
    },
    watch:{
        //切换选项卡
        active(val){
            this.pageNum = 1;
            //评论和收益需要单独调用其他接口
            //1：浏览，2：点赞，3：收藏，4：分享，5：不感兴趣，6：举报
            // 评论
            if(val == 'A'){
                this.http = 'comment_income';
                this.list_other();
            }
            // 收益
            else if(val == 'B'){
                this.http = 'article_income';
                this.list_other();
            }
            // 回复
            else if(val == 'H'){
                this.http = 'reply_income';
                this.list_other();
            }
            else{
                this.list();
            }
        },
    },
    methods:{
        //加载列表
        list:function(){
            this.loading = true;
            HTTP('content_income', {
                contentUid:this.id,
                tab:this.active, //1：浏览，2：点赞，3：收藏，4：分享，5：不感兴趣，6：举报
                pageNum:this.pageNum,
                pageSize:this.pageSize
            })
            .then(res=>{
                this.loading = false;
                if(res.code == 200){
                    this.formData = res.data?res.data.list:[];
                    this.pageTotal = res.data?res.data.total:0;
                }
            })
        },
        //文章列表
        list_other:function(){
            this.loading = true;
            HTTP(this.http, {
                contentUid:this.id, //1
                pageNum:this.pageNum,
                pageSize:this.pageSize
            })
            .then(res=>{
                this.loading = false;
                if(res.code == 200){
                    this.formData = res.data.list;
                    this.pageTotal = res.data.total;
                    // 语音处理
                    this.formData.map(o=>{
                        if(o.voiceUrl){
                            this.$set(o,'click',false);
                        }
                    });
                }
            })
        },
        //导出
        exportExcel:function(){
            HTTP('export_detail', {
                contentUid:this.$route.query.id,
                tab:this.active
            })
            .then(res=>{
                if(res.code == 200){
                    window.open(remote + 'common/download?fileName=' + res.msg + '&delete=true')
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
        //总数
        total:function(){
            HTTP('content_total', {
                contentUid:this.id,
                pageNum:1,
                pageSize:20
            })
            .then(res=>{
                if(res.code == 200){
                    this.tabs = [
                        {
                            label:`浏览（${this.tranNumber(res.data.browse)}）`,
                            value:'1',
                        },
                    ];
                    // 如果是文章
                    if(this.type == 3){
                        this.tabs.push(
                            {
                                label:`收藏（${this.tranNumber(res.data.collect)}）`,
                                value:'3',
                            },
                            {
                                label:`点赞（${this.tranNumber(res.data.approval)}）`,
                                value:'2',
                            },
                            {
                                label:`分享（${res.data.share}）`,
                                value:'4',
                            },
                            {
                                label:`评论（${res.data.comment}）`,
                                value:'A',
                            },
                            {
                                label:`不感兴趣（${res.data.notInterested}）`,
                                value:'5',
                            },
                            {
                                label:`举报（${res.data.reported}）`,
                                value:'6',
                            },
                            {
                                label:`收益（${res.data.income}）`,
                                value:'B',
                            },
                        );
                    }
                    // 提问
                    else if(this.type == 2){
                        this.tabs.push(
                            {
                                label:`收藏（${this.tranNumber(res.data.collect)}）`,
                                value:'3',
                            },
                            {
                                label:`分享（${res.data.share}）`,
                                value:'4',
                            },
                            {
                                label:`不感兴趣（${res.data.notInterested}）`,
                                value:'5',
                            },
                            {
                                label:`举报（${res.data.reported}）`,
                                value:'6',
                            },
                            {
                                label:`回答（${res.data.answer}）`,
                                value:'H',
                            },
                        )
                    }
                    // 动态和回答
                    else if(this.type == 1 || this.type ==4){
                        this.tabs.push(
                            {
                                label:`点赞（${this.tranNumber(res.data.approval)}）`,
                                value:'2',
                            },
                            {
                                label:`收藏（${this.tranNumber(res.data.collect)}）`,
                                value:'3',
                            },
                            {
                                label:`分享（${res.data.share}）`,
                                value:'4',
                            },
                            {
                                label:`评论（${res.data.comment}）`,
                                value:'A',
                            },
                            {
                                label:`不感兴趣（${res.data.notInterested}）`,
                                value:'5',
                            },
                            {
                                label:`举报（${res.data.reported}）`,
                                value:'6',
                            },
                        )
                    }
                    // 评论
                    else if(this.type == 5){
                        this.tabs.push(
                            {
                                label:`点赞（${this.tranNumber(res.data.approval)}）`,
                                value:'2',
                            },
                            {
                                label:`回复（${res.data.answer}）`,
                                value:'H',
                            },
                        );
                    }
                    this.list();
                }
            })
        },
        //改变分页
        changePage:function(obj){
            this.pageSize = obj.pageSize;
            this.pageNum = obj.pageNum;
            if(this.active == 'A' || this.active == 'B' || this.active == 'H'){
                this.list_other();
            }
            else{
                this.list();
            }
        },
        //数字转为万
        tranNumber:function(n) {
            let str = n.toString();
            if(str.length>=5){
                return parseInt(n/10000) + 'W';
            }
            else{
                return n
            }
        },
    },
    mounted(){
        this.total();
    }
}
</script>

<style lang="scss" scoped>

</style>
